<template>
  <div class="cart">
    <NavBar>
      <template #default> 购物车 </template>
    </NavBar>

    <!-- 购物车头部 -->
    <div class="cart-header">
      <el-checkbox v-model="isAllSelected" @change="handleSelectAll">
        全选
      </el-checkbox>
      <div class="edit" @click="isEdit = !isEdit">
        {{ isEdit ? "完成" : "编辑" }}
      </div>
    </div>

    <!-- 购物车列表 -->
    <div class="cart-list">
      <div v-for="item in cartStore.cartList" :key="item.id" class="cart-item">
        <el-checkbox
          :model-value="item.selected"
          @update:model-value="(val) => cartStore.toggleSelect(item.id)"
        />
        <img :src="item.image_url" :alt="item.name" />
        <div class="item-info">
          <h3>{{ item.name }}</h3>
          <div class="item-bottom">
            <span class="price">¥{{ item.price }}</span>
            <el-input-number
              v-model="item.count"
              :min="1"
              :max="99"
              @change="(value) => cartStore.updateCount(item.id, value)"
            />
          </div>
        </div>
        <el-button
          type="danger"
          circle
          class="delete-btn"
          @click="handleDelete(item.id)"
        >
          <el-icon><Delete /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 底部结算栏 -->
    <div class="cart-footer">
      <div class="left">
        <el-checkbox v-model="isAllSelected" @change="handleSelectAll">
          全选
        </el-checkbox>
      </div>
      <div class="right">
        <template v-if="!isEdit">
          <div class="total">
            合计: <span class="price">¥{{ cartStore.selectedTotalPrice }}</span>
          </div>
          <el-button
            type="danger"
            :disabled="!cartStore.selectedCount"
            @click="handleCheckout"
          >
            结算({{ cartStore.selectedCount }})
          </el-button>
        </template>
        <template v-else>
          <el-button
            type="danger"
            :disabled="!cartStore.selectedCount"
            @click="handleBatchDelete"
          >
            删除
          </el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useCartStore } from "@/stores/modules/cart";
import { ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import NavBar from "@/components/common/NavBar.vue";

const cartStore = useCartStore();
const isEdit = ref(false);
const router = useRouter();

// 是否全选
const isAllSelected = computed({
  get: () =>
    cartStore.cartList.length &&
    cartStore.cartList.every((item) => item.selected),
  set: (value) => cartStore.toggleSelectAll(value),
});

// 全选/取消全选
const handleSelectAll = (value) => {
  cartStore.toggleSelectAll(value);
};

// 删除单个商品
const handleDelete = async (productId) => {
  try {
    await ElMessageBox.confirm("确定要删除该商品吗？", "提示");
    cartStore.removeFromCart(productId);
  } catch {
    // 取消删除
  }
};

// 批量删除
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm("确定要删除选中的商品吗？", "提示");
    const deleteIds = cartStore.cartList
      .filter((item) => item.selected)
      .map((item) => item.id);
    deleteIds.forEach((id) => cartStore.removeFromCart(id));
  } catch {
    // 取消删除
  }
};

// 结算
const handleCheckout = () => {
  router.push({
    path: "/checkout",
    query: {
      source: "cart",
    },
  });
};

onMounted(() => {
  cartStore.loadFromLocal();
});
</script>

<style scoped>
.cart {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 110px; /* 增加底部padding,为底部导航栏+结算栏留出空间 */
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 15px;
  background: #fff;
}

.edit {
  color: #666;
  cursor: pointer; /* 添加鼠标手型 */
}

.cart-item .el-checkbox {
  margin-right: 10px; /* 调整复选框间距 */
}

:deep(.el-checkbox) {
  margin-right: 10px;
}

:deep(.el-checkbox__input) {
  cursor: pointer;
}

:deep(.el-checkbox__inner) {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border-color: #dcdfe6;
}

:deep(.el-checkbox__inner::after) {
  height: 9px;
  left: 6px;
  width: 4px;
  border-color: #fff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.cart-list {
  margin-top: 10px;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fff;
  margin-bottom: 10px;
}

.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 0 10px;
}

.item-info {
  flex: 1;
}

.item-info h3 {
  font-size: 14px;
  margin: 0 0 10px;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
}

.delete-btn {
  margin-left: 10px;
}

.cart-footer {
  position: fixed;
  bottom: 55px;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px; /* 使用 padding 替代 margin */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 99;
  margin: 0; /* 移除原有的 margin */
  max-width: 480px; /* 添加最大宽度限制 */
  width: 100%; /* 确保宽度占满 */
  left: 50%; /* 居中处理 */
  transform: translateX(-50%); /* 居中处理 */
}

.right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.total {
  margin-right: 10px;
}
</style>
